{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  {{#isTabActionEnabled "settings-tab" "Settings.change_language"}}
  <div class="medium-6 columns end">
    <dl class="accordion" data-accordion>
      <dd class="accordion-item" data-accordion-item>
        <a href="#provision_update_language_accordion" class="text-center accordion-title">
          <div class="text-center only-not-active">
            <span class="fa-stack fa-3x"> <i class="fas fa-cloud fa-stack-2x"></i> <i class="fas fa-comments fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <br class="only-not-active">
          <i class="fas fa-lg fa-comments only-active"></i>
          {{tr "Change Language"}}
        </a>
        <div id="provision_update_language_accordion" class="accordion-content" data-tab-content>
          <br>
          <form id="provision_change_language_form">
            <div class="row">
              <div class="large-12 columns">
                <select type="language" id="provision_new_language" class="provision-input">{{{languageOptions}}}</select>
              </div>
            </div>
            <div class="row">
              <div class="large-12 columns">
                <button href"#" type="submit" class="button large radius large-12 small-12">{{tr "Update Language"}}</button>
              </div>
            </div>
          </form>
        </div>
      </dd>
    </dl>
  </div>
  {{/isTabActionEnabled}}
  {{#isTabActionEnabled "settings-tab" "Settings.change_password"}}
  <div class="medium-6 columns end">
    <dl class="accordion" data-accordion>
      <dd class="accordion-item" data-accordion-item>
        <a href="#provision_update_password_accordion" class="text-center accordion-title">
          <div class="text-center only-not-active">
            <span class="fa-stack fa-3x">
              <i class="fas fa-cloud fa-stack-2x"></i>
              <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <br class="only-not-active">
          <i class="fas fa-lg fa-lock only-active"></i>
          {{tr "Change Password"}}
        </a>
        <div id="provision_update_password_accordion" class="accordion-content" data-tab-content>
          <br>
          <form id="provision_change_password_form">
            <div class="row">
              <div class="large-12 columns">
                <input type="password" autocomplete="new-password" id="provision_new_password" class="provision-input" placeholder="{{tr "New Password"}}"/>
              </div>
            </div>
            <div class="row">
              <div class="large-12 columns">
                <input type="password" autocomplete="new-password" id="provision_new_confirm_password" class="provision-input" placeholder="{{tr "Confirm Password"}}"/>
              </div>
            </div>
            {{#if cantChangePassword}}
              <div>
                Special Cloud administrator accounts (oneadmin and serveradmin)
                cannot be changed in Sunstone as authorization files need to be changed
                to ensure the proper functioning of the OpenNebula cloud. Please follow the
                <a href="http://docs.opennebula.io/5.10/operation/users_groups_management/manage_users.html#change-credentials-for-oneadmin-or-serveradmin" target="_blank">documentation</a>
                for this task.
              </div>
            {{/if}}
            <div class="row">
              <div class="large-12 columns">
                <button href"#" type="submit" class="button large radius large-12 small-12" {{#if cantChangePassword}}disabled{{/if}}>{{tr "Update Password"}}</button>
              </div>
            </div>
          </form>
        </div>
      </dd>
    </dl>
  </div>
  {{/isTabActionEnabled}}
</div>
<div class="row">
  {{#isTabActionEnabled "settings-tab" "Settings.change_view"}}
  <div class="medium-6 columns end">
    <dl class="accordion" data-accordion>
      <dd class="accordion-item" data-accordion-item>
        <a href="#provision_update_view_accordion" class="text-center accordion-title">
          <div class="text-center only-not-active">
            <span class="fa-stack fa-3x">
              <i class="fas fa-cloud fa-stack-2x"></i>
              <i class="fas fa-image fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <br class="only-not-active">
          <i class="fas fa-lg fa-image only-active"></i>
          {{tr "Change view"}}
        </a>
        <div id="provision_update_view_accordion" class="accordion-content" data-tab-content>
          <br>
          <form id="provision_change_view_form">
            <div class="row">
              <div class="large-12 columns">
                <select id="provision_user_views_select" class="provision-input"></select>
              </div>
            </div>
            <div class="row">
              <div class="large-12 columns">
                <button href"#" type="submit" class="button large radius large-12 small-12">{{tr "Update view"}}</button>
              </div>
            </div>
          </form>
        </div>
      </dd>
    </dl>
  </div>
  {{/isTabActionEnabled}}
  {{#isTabActionEnabled "settings-tab" "Settings.ssh_key"}}
  <div class="medium-6 columns end">
    <form id="provision_add_ssh_key_form">
      <div class="row">
        <div class="large-12 large-centered columns">
          <dl class="accordion" data-accordion>
            <dd class="accordion-item" data-accordion-item>
              <a href="#provision_add_ssh_key_accordion" class="text-center accordion-title">
                <div class="text-center only-not-active">
                  <span class="fa-stack fa-3x">
                    <i class="fas fa-cloud fa-stack-2x"></i>
                    <i class="fas fa-key fa-stack-1x fa-inverse"></i>
                  </span>
                </div>
                <br class="only-not-active">
                <i class="fas fa-key fa-lg only-active"></i>
                <span class="provision_add_ssh_key_button">{{tr "Add SSH Key"}}</span>
                <span class="provision_update_ssh_key_button">{{tr "Update SSH Key"}}</span>
              </a>
              <div id="provision_add_ssh_key_accordion" class="accordion-content" data-tab-content>
                <br>
                <p>
                  <span class="provision_add_ssh_key_button">
                    {{tr "Add a public SSH key to your account!"}}
                    <br>
                    {{tr "You will be able to access your Virtual Machines without password"}}
                  </span>
                  <span class="provision_update_ssh_key_button">
                    {{tr "Update your public SSH key!"}}
                    <br>
                    {{tr "You will be able to access your Virtual Machines without password"}}
                  </span>
                </p>
                <div class="row">
                  <div class="large-12 large-centered columns">
                    <textarea id="provision_ssh_key" placeholder="SSH key" class="provision-input"></textarea>
                  </div>
                </div>
                <div class="row">
                  <div class="large-12 large-centered columns">
                    <button href="#" type="submit" class="provision_add_ssh_key_button button large radius large-12 small-12">{{tr "Add SSH Key"}}</button>
                    <button href="#" type="submit" class="provision_update_ssh_key_button button large radius large-12 small-12" hidden>{{tr "Update SSH Key"}}</button>
                  </div>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </form>
  </div>
  {{/isTabActionEnabled}}
</div>
<div class="row">
  {{#isTabActionEnabled "settings-tab" "Settings.login_token"}}
  <div class="medium-6 columns end">
    <div class="row">
      <div class="large-12 large-centered columns">
        <dl class="accordion" data-accordion>
          <dd class="accordion-item" data-accordion-item>
            <a href="#provision_login_token_accordion" class="text-center accordion-title">
              <div class="text-center only-not-active">
                <span class="fa-stack fa-3x">
                  <i class="fas fa-cloud fa-stack-2x"></i>
                  <i class="fas fa-unlock-alt fa-stack-1x fa-inverse"></i>
                </span>
              </div>
              <br class="only-not-active">
              <i class="fas fa-lg fa-unlock-alt only-active"></i>
              {{tr "Login Token"}}
            </a>
            <div id="provision_login_token_accordion" class="accordion-content" data-tab-content>
              <br/>
              <p>
                {{tr "A login token acts as a password and can be used to authenticate with OpenNebula through Sunstone, the CLI, or the API"}}
              </p>
              <div class="row">
                <div class="large-12 columns">
                  <button href"#" type="submit" class="button large radius large-12 small-12 provision_login_token_button">{{tr "Manage login tokens"}}</button>
                </div>
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  {{/isTabActionEnabled}}
  {{#isTabActionEnabled "settings-tab" "Settings.two_factor_auth"}}
  <div class="medium-6 columns end">
    <div class="row">
      <div class="large-12 large-centered columns">
        <dl class="accordion" data-accordion>
          <dd class="accordion-item" data-accordion-item>
            <a href="#provision_two_factor_auth_accordion" class="text-center accordion-title">
              <div class="text-center only-not-active">
                <span class="fa-stack fa-3x">
                  <i class="fas fa-cloud fa-stack-2x"></i>
                  <i class="fas fa-unlock-alt fa-stack-1x fa-inverse"></i>
                </span>
              </div>
              <br class="only-not-active">
              <i class="fas fa-lg fa-unlock-alt only-active"></i>
              {{tr "Two Factor Authentication"}}
            </a>
            <div id="provision_two_factor_auth_accordion" class="accordion-content" data-tab-content>
              <br/>
              <p>
                {{tr "Two factor authentication can be enabled for logging into Sunstone UI."}}
              </p>
              <div class="row">
                <div class="large-12 columns">
                  <button href"#" type="submit" class="button large radius large-12 small-12 provision_two_factor_auth_button"></button>
                </div>
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  {{/isTabActionEnabled}}
</div>